@include("template::My.views.header")
<link href="/mycms/cms/theme/My/assets/css/index.css?time={{time()}}" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.2.6/swiper-bundle.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.2.6/swiper-bundle.min.js"></script>
    <style>
        .swiper-pagination-bullet{
            border-radius:2px;
            height: 4px;
            width: 6px;
            background: #fff;
            opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.5);
        }
        .swiper-pagination-bullet-active{
            opacity: var(--swiper-pagination-bullet-inactive-opacity, 1);
            width: 15px;
        }
    </style>
</head>
<body class="bg-gradient-to-b  from-[#EAF0FF] to-[#F9F9F9]  font-['PingFang']" >
     <div class="swiper container mx-auto w-11/12 rounded-2xl  shadow-xl shadow-blue-400/30   h-36 mt-5">
        <div class="swiper-wrapper">
          @foreach($list as $a)
         <div class="swiper-slide"><a href="{{$a->url}}"><img src="{{$a->img}}" alt="{{$a->name}}" class="h-auto" ></a></div>
            @endforeach
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="container mx-auto w-full  h-auto  flex flex-row  text-[15.5px]  font-bold mt-[28px] ">
        <div  class="basis-3/12 text-center mx-auto   " >
            <a href="{{url('/')}}"><span class="">热门</span></a>
             @if(!$id)<center><div class="w-[36px] h-[6px] rounded-[3px] -mt-[8px]   bg-[#3368FD] " ></div></center>@endif
        </div>
        @foreach($clist as $c) 
        <div  class="basis-3/12 text-center ">
                <a href="?cid={{$c->id}}"><span class="" >{{$c->name}}</span>
                @if($id==$c->id)<center><div class="w-[36px] h-[6px] rounded-[3px] -mt-[8px]    bg-[#3368FD] " ></div></center>@endif</a>
        </div>
       @endforeach
    </div>
    <div class="container mx-auto h-auto  bg-white  w-11/12  rounded-xl mt-4 " >
         @foreach($article_list as $article) 
        <div class=" w-11/12  mx-auto   flex items-center space-x-4  @if(!$loop->last) border-b border-[#A2ABBD] border-opacity-50 @endif pt-[18px] pb-[14px]">
            <div class="shrink-0">
                <a href="{{single_path($article->id)}}"><img class="h-[77px] w-[77px]" src="@if(isset($article->img)) {{$article->img}} @else /mycms/cms/theme/mycms/assets/img/blog/1.jpg @endif" alt=" "></a>
            </div>
            <div class="h-[77px]">
                 <a href="{{single_path($article->id)}}"><p class="text-[#0B0B0B] font-['PingFang'] leading-[28px] text-[14.6px]  font-bold h-7 break-words overflow-ellipsis overflow-hidden">{{$article->title}}</p>
                <p class="text-[#666666] font-['PingFang'] text-[13.3px]  font-medium  break-words overflow-ellipsis overflow-hidden">{{$article->description}}</p></a>
            </div>
        </div>
         @endforeach
         <br>
     </div>
   
    <div class="container mx-auto bg-white w-full h-16 flex flex-row   left-0 right-0 bottom-0 fixed  ">
        <div class="basis-4/12 text-center bg-white  pt-1">
            <a href="{{url('/')}}"><div class="content-center "><center><img src="/mycms/cms/theme/My/assets/img/40.png" class="h-[33px] w-[33px]  justify-items-center" ></center></div>
            <p  class="text-center font-medium  text-[11px]  text-[#3368FD]] font-['PingFang']">首页</p></a>
        </div>
        <div class="basis-4/12  bg-white  pt-1 ">
            <a href="{{route('cms.honor')}}" ><div class="content-center"><center><img src="/mycms/cms/theme/My/assets/img/39.png" class="h-[33px] w-[33px]  justify-items-center"></center></div>
            <p  class="text-center  font-medium  text-[11px] text-[#333333] font-['PingFang']">荣誉</p></a>
        </div>
        <div class="basis-4/12 bg-white  pt-1">
            <a href="{{route('user.index')}}"><div class="content-center"><center><img src="/mycms/cms/theme/My/assets/img/37.png" class="h-[33px] w-[33px] justify-items-center"></center></div>
            <p class="text-center font-medium text-[11px] font-['PingFang']  text-[#333333">我的</p></a>
        </div>
    </div>
<script>
 var mySwiper = new Swiper ('.swiper', {
   // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    autoplay:true,
    preventClicks : false,
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // // 如果需要前进后退按钮
    // navigation: {
    //   nextEl: '.swiper-button-next',
    //   prevEl: '.swiper-button-prev',
    // },
    
    // // 如果需要滚动条
    // scrollbar: {
    //   el: '.swiper-scrollbar',
    // },
  })     
</script>
@include("template::My.views._footer")